<template>
  <el-dialog class="userinfo" width="1000px" :visible.sync="visible" title="个人信息/预约信息" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-button size="small" type="primary" @click="updatePasswordHandle">修改密码</el-button>
    <el-button size="small" type="primary" @click="logoutHandle">退出</el-button>
    <div class="item">客户姓名：{{dataForm.userEntity.customerName}}</div>
    <div class="item">客户手机：{{dataForm.userEntity.mobile}}</div>
    <el-table :data="dataForm.carCustomerInfo" border>
      <el-table-column prop="carModel" min-width="150px" label="预约车型" show-overflow-tooltip header-align="center" align="center"></el-table-column>
      <el-table-column prop="appointmentTime" min-width="150px" label="预约时间" show-overflow-tooltip header-align="center" align="center"></el-table-column>
    </el-table>
    <login-or-register ref="loginOrRegister" @refresh="getInfo"/>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </el-dialog>
</template>

<script>
import Cookies from 'js-cookie'
import loginOrRegister from './loginOrRegister.vue'
// import { clearLoginInfo } from '@/utils'
import UpdatePassword from '../../../main-navbar-update-password'
export default {
  components: { loginOrRegister, UpdatePassword },
  data () {
    return {
      visible: false,
      updatePassowrdVisible: true,
      dataForm: {
        userEntity: {},
        carCustomerInfo: []
      }
    }
  },
  methods: {
    // 显示弹窗
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.getInfo()
      })
    },
    // 登陆或注册
    loginOrRegister () {
      this.$refs.loginOrRegister.init()
    },
    // 获取信息
    getInfo () {
      if (Cookies.get('token')) {
        this.$http.get('/app/subscribelist').then(({ data: res }) => {
          let { code, msg } = res
          console.log(code, msg)
          if (code === 401) {
            this.loginOrRegister()
          }
          if (code === 0) {
            console.log(res)
            this.dataForm = res.jsonObject
          }
          if (code !== 0) {
            this.$message.error(msg)
          }
        })
      } else {
        this.loginOrRegister()
      }
    },
    // 修改密码
    updatePasswordHandle () {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        Cookies.set('token', null)
        this.dataForm = {
          userEntity: {},
          carCustomerInfo: []
        }
        this.getInfo()
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss">
.userinfo{
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  .el-dialog__header{
    .el-dialog__title{
      font-size: 14px;
      font-weight: bold;
    }
    border-bottom: 1px solid #f2f2f2;
  }
  .el-dialog__body{
    padding: 15px 20px;
  }
  .item{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
